<template>
  <div id="login">
    <div v-show="true">
      <img src="/images/background/static0.webp" alt="" class="background" />
    </div>
    <div class="loginList">
      <div class="from_box" :class="{ from_box2: showLogin }">
        <!-- 注册页面 -->
        <div class="register-box" v-if="showLogin">
          <h1>欢迎注册</h1>
          <div class="traninput">
            <input
              type="email"
              placeholder="邮箱:xxx@qq.xx"
              v-model="regEmail"
              @keydown.enter="handleRegister"
            />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <div class="codemodule">
            <div class="traninput">
              <input type="text" @keydown.enter="handleRegister" placeholder="验证码" v-model="regCaptcha" />
              <span class="bottom"></span>
              <span class="search-right"></span>
              <span class="top"></span>
              <span class="search-left"></span>
            </div>
            <button class="btn code" @click="handleCaptcha">发送验证码</button>
          </div>
          <div class="traninput">
            <input type="password" @keydown.enter="handleRegister" placeholder="密码:8~16位" v-model="regPwd" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <div class="traninput">
            <input type="password" @keydown.enter="handleRegister" placeholder="确认密码" v-model="regRePwd" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <button class="btn" @click="handleRegister">注册</button>
          <p class="showSize" @click="handleSwitch">已有账号?</p>
        </div>
        <!-- 登录界面 -->
        <div class="login-box" v-show="!data.isResetPassword" v-else>
          <h1>欢迎登录</h1>
          <div class="traninput">
            <input type="email" @keydown.enter="handleLogin" v-model="logEmail" placeholder="邮箱" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <div class="traninput">
            <input type="password" @keydown.enter="handleLogin" v-model="logPwd" placeholder="密码" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <button class="btn" @click="handleLogin">登录</button>
          <p
            style="color: #fff; cursor: pointer; padding-left: 6px"
            @click="handleSetPwd"
          >
            忘记密码？
          </p>
          <p class="showSize" @click="handleSwitch1">没有账号?</p>
        </div>
        <!-- 忘记密码 -->
        <div class="login-box" v-show="data.isResetPassword">
          <h1 style="color: #fff; font-family: '微软雅黑'">重置密码</h1>
          <div class="traninput">
            <input
              type="email"
              placeholder="邮箱:xxx@qq.xx"
              v-model="data.resetEmail"
              @keydown.enter="handleResetPassword"
            />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <div class="codemodule">
            <div class="traninput">
              <input type="text" @keydown.enter="handleResetPassword" placeholder="验证码" v-model="data.resetCaptcha" />
              <span class="bottom"></span>
              <span class="search-right"></span>
              <span class="top"></span>
              <span class="search-left"></span>
            </div>
            <button class="btn code" @click="handleResetCaptcha">发送验证码</button>
          </div>
          <div class="traninput">
            <input type="password" @keydown.enter="handleResetPassword" v-model="data.resetPwd" placeholder="新密码:8~16位" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <div class="traninput">
            <input type="password" @keydown.enter="handleResetPassword" v-model="data.resetRePwd" placeholder="确认新密码" />
            <span class="bottom"></span>
            <span class="search-right"></span>
            <span class="top"></span>
            <span class="search-left"></span>
          </div>
          <button class="btn" @click="handleResetPassword">重置密码</button>
          <span
            style="color: #fff; cursor: pointer"
            @click="handleSetPwd"
            >去登录</span
          >
        </div>
      </div>
      <div class="leftOrright">
        <div class="con-box search-left">
          <h2>欢迎来到<span>熊猫起始页</span></h2>
          <p>已有账号</p>
          <button class="btn" @click="handleSwitch">去登录</button>
        </div>
        <div class="con-box search-right">
          <h2>欢迎来到<span>熊猫起始页</span></h2>
          <p>没有账号?</p>
          <button class="btn" @click="handleSwitch1">去注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { sendCaptchaToEmail, sendForgetPasswordCaptcha, register123, login123, resetPassword } from "@/api/user";
import { reactive, toRefs, computed, onMounted, onUpdated } from "vue";
import { useRouter } from "vue-router";
import { useHomeStore } from "@/stores/home";
const store = useHomeStore();
const router = useRouter();
const data = reactive({
  showLogin: false,

  regEmail: "", //用户注册邮箱
  regCaptcha: "", //用户注册邮箱验证码
  regPwd: "", //用户注册密码
  regRePwd: "", //用户注册确认密码

  resetEmail: "", //重置用户注册邮箱
  resetCaptcha: "", //重置用户注册邮箱验证码
  resetPwd: "", //重置用户注册密码
  resetRePwd: "", //重置用户注册确认密码

  logEmail: "", //用户登录邮箱
  logPwd: "", //用户登录密码邮箱

  msg: [], //保存后端返回的信息
  isResetPassword: false, //控制显示重置密码界面
});
const { showLogin, regEmail, regCaptcha, regPwd, regRePwd, logEmail, logPwd } =
  toRefs(data);
// 去登录按钮
const handleSwitch = () => {
  // console.log('登录和注册界面',data.showLogin);
  // console.log('重置密码界面',data.isResetPassword);
  if (data.isResetPassword == false) {
    data.isResetPassword = true;
    data.showLogin = false;
  }
  if (data.isResetPassword) {
    data.isResetPassword = false;
    data.showLogin = false;
  }
};
// 去注册按钮
const handleSwitch1 = () => {
  // console.log('登录和注册界面',data.showLogin);
  // console.log('重置密码界面',data.isResetPassword);
  if (!data.showLogin) {
    data.isResetPassword = false;
    data.showLogin = true;
  }
};
// 控制重置密码与登录界面切换
const handleSetPwd = ()=>{
  data.isResetPassword = !data.isResetPassword
  console.log(data.isResetPassword);
  if(!data.isResetPassword){
    data.logEmail = data.resetEmail
    // console.log('重置用户邮件',data.resetEmail);
  }else{
     data.resetEmail = data.logEmail
    // console.log('用户邮件',data.logEmail);
  }
}
onMounted(() => {});
onUpdated(() => {
  // console.log('这是重置密码与登录密码更新完毕',data.isResetPassword);
});
/**
 * 当点击获取验证码按钮，发送注册邮件
 */
const handleCaptcha = () => {
  sendCaptchaToEmail(data.regEmail).then((res) => {
    if (res.code === 20000) {
      ElMessage({
        showClose: true,
        message: "发送成功",
        type: "success",
      });
    } else {
      ElMessage({
        showClose: true,
        message: res.message,
        type: "warning",
      });
    }
  });
};

/**
 * 发送忘记密码邮件
 */
const handleResetCaptcha = () => {
  sendForgetPasswordCaptcha(data.resetEmail).then((res) => {
    if (res.code === 20000) {
      ElMessage({
        showClose: true,
        message: "发送成功",
        type: "success",
      });
    } else {
      ElMessage({
        showClose: true,
        message: res.message,
        type: "warning",
      });
    }
  });
};

const handleRegister = () => {
  register123(data.regEmail, data.regPwd, data.regCaptcha).then((res) => {
    console.log(res);
    if (data.regEmail && data.regCaptcha && data.regPwd && data.regRePwd) {
      if (res.code === 20000) {
        localStorage.setItem("token", res.retData);
        store.updateToken(res.retData);
        router.push("/");
        ElMessage({
          showClose: true,
          message: res.message,
          type: "success",
        });
      } else {
          ElNotification({
            title: "",
            type: "warning",
            dangerouslyUseHTMLString: true,
            message: res.retData === null ? res.message : res.retData.join("<br>"),
          });
      }
    } else {
      ElNotification({
        title: "",
        type: "warning",
        dangerouslyUseHTMLString: true,
        message: res.retData.join("<br>"),
      });
    }
  });
};

const handleResetPassword = ()=>{
  // console.log('重置密码');
  resetPassword(data.resetEmail, data.resetPwd, data.resetCaptcha).then(res => {
    if(data.resetEmail && data.resetCaptcha && data.resetPwd && data.resetRePwd){
      if(res.code === 20000){
        ElMessage({
          showClose: true,
          message: res.message,
          type: "success",
        });
        data.isResetPassword = false;
      }else{
        ElNotification({
            title: "",
            type: "warning",
            dangerouslyUseHTMLString: true,
            message: res.retData !== null ? res.retData.join("<br>") :res.message,
        });
      }
    }else{
       ElNotification({
            title: "",
            type: "warning",
            dangerouslyUseHTMLString: true,
            message: res.retData.join("<br>"),
        });
    }
    
  });
};

const handleLogin = () => {
  login123(data.logEmail, data.logPwd).then((res) => {
    console.log(res);
    if (data.logPwd && data.logPwd) {
      if (res.code === 20000) {
        localStorage.setItem("token", res.retData);
        store.updateToken(res.retData);
        router.push("/");
        ElMessage({
          showClose: true,
          message: res.message,
          type: "success",
        });
      } else {
        if (res.retData === null) {
          ElNotification({
            title: "",
            type: "error",
            dangerouslyUseHTMLString: true,
            message: res.message,
          });
        } else {
          data.msg = res.retData;
          ElNotification({
            title: "",
            type: "warning",
            dangerouslyUseHTMLString: true,
            message: res.retData.join("<br>"),
          });
        }
      }
    } else {
      ElNotification({
        title: "",
        type: "warning",
        dangerouslyUseHTMLString: true,
        message: res.retData.join("<br>"),
      });
    }
  });
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  .background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s;
    z-index: -1;
  }

  .loginList {
    position: relative;
    width: 700px;
    height: 400px;
    display: flex;
    justify-content: center;
    color: #000;
    z-index: 999;

    .icon {
      width: 30px;
      height: 30px;
      cursor: pointer;
    }

    .from_box {
      position: absolute;
      width: 280px;
      height: 400px;
      border-radius: 10px;
      top: 0;
      left: 36px;
      display: flex;

      z-index: 9991;
      align-items: center;
      justify-content: center;
      transition: 0.5s;

      .login-box,
      .register-box {
        border-radius: 10px;
        background-color: #171717fb;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        .showSize {
          display: none;
        }

        input {
          width: 200px;
          height: 20px;
          border: none;
          padding: 8px 0;
          letter-spacing: 3px;
          font-size: 16px;
          text-indent: 8px;
        }

        input:focus {
          border-bottom: 2px solid orange;
        }

        h1 {
          text-align: center;
          color: #fff;
          margin-bottom: 25px;
          font-size: 20px;
          letter-spacing: 5px;
        }
        .btn {
          width: 100px;
          z-index: 1;
          position: relative;
          font-size: inherit;
          font-family: inherit;
          color: white;
          border-radius: 6px;
          padding: 0.5em 1em;
          outline: none;
          border: none;
          background-color: hsl(236, 32%, 26%);
          overflow: hidden;
          transition: color 0.4s ease-in-out;
        }

        .btn::before {
          content: "";
          z-index: -1;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          background-color: #fff;
          transform-origin: center;
          transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
          transition: transform 0.45s ease-in-out;
        }

        .btn:hover {
          cursor: pointer;
          color: #161616;
        }

        .btn:hover::before {
          transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
        }
        // button {
        //   cursor: pointer;
        //   width: 100px;
        //   height: 30px;
        //   background-color: #fff;
        //   border-radius: 20px;
        //   text-align: center;
        //   transition: 0.3s;
        // }
        // button:hover {
        //   background-color: #00ff11;
        // }
        .traninput {
          position: relative;
          input {
            width: 200px;
            color: #fff;
            font-size: inherit;
            font-family: inherit;
            border-radius: 5px;
            background-color: hsl(236, 32%, 26%);
            padding: 0.35em 0.45em;
            border: 1px solid transparent;
            transition: background-color 0.3s ease-in-out;
          }

          input:focus {
            outline: none;
          }

          input::placeholder {
            color: hsla(0, 0%, 100%, 0.6);
          }

          span {
            position: absolute;
            background-color: #fff;
            border-radius: 5px;
            transition: transform 0.1s ease;
          }

          .bottom,
          .top {
            height: 1px;
            left: 0;
            right: 0;
            transform: scaleX(0);
          }

          .search-left,
          .search-right {
            width: 1px;
            top: 0;
            bottom: 0;
            transform: scaleY(0);
          }

          .bottom {
            bottom: 0;
            transform-origin: bottom right;
          }

          input:focus ~ .bottom {
            transform-origin: bottom left;
            transform: scaleX(1);
          }

          .search-right {
            right: 0;
            transform-origin: top right;
            transition-delay: 0.05s;
          }

          input:focus ~ .search-right {
            transform-origin: bottom right;
            transform: scaleY(1);
          }

          .top {
            top: 0;
            transform-origin: top left;
            transition-delay: 0.15s;
          }

          input:focus ~ .top {
            transform-origin: top right;
            transform: scaleX(1);
          }

          .search-left {
            left: 0;
            transform-origin: bottom left;
            transition-delay: 0.25s;
          }

          input:focus ~ .search-left {
            transform-origin: top left;
            transform: scaleY(1);
          }
        }
        .codemodule {
          width: 214px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .traninput {
            input {
              width: 100px !important;
            }
          }
          .code {
            width: 90px;
            height: 33px;
            font-size: 12px;
            border-radius: 5px;
          }
        }
      }
      .con-box {
        color: #000;
      }
    }
    .from_box2 {
      transform: translate(350px);
    }
    .leftOrright {
      width: 628px;
      height: 100%;
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.361);
      .con-box {
        width: 280px;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        span {
          font-size: 30px;
        }
      }
      .btn {
        z-index: 1;
        position: relative;
        font-size: inherit;
        font-family: inherit;
        color: white;
        border-radius: 10px;
        padding: 0.5em 1em;
        outline: none;
        border: none;
        background-color: hsl(236, 32%, 26%);
        overflow: hidden;
        transition: color 0.4s ease-in-out;
      }

      .btn::before {
        content: "";
        z-index: -1;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background-color: #fff;
        transform-origin: center;
        transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
        transition: transform 0.45s ease-in-out;
      }

      .btn:hover {
        cursor: pointer;
        color: #161616;
      }

      .btn:hover::before {
        transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
      }
      // button {
      //   cursor: pointer;
      //   width: 100px;
      //   height: 30px;
      //   background-color: #fff;
      //   border-radius: 20px;
      //   text-align: center;
      //   transition: 0.3s;
      // }
      // button:hover {
      //   background-color: #00ff11;
      // }
    }
  }
}
@media screen and (max-width: 700px) {
  .loginList {
    width: 300px !important;
    height: 400px !important;
    .from_box2 {
      transform: translate(0px) !important;
    }
  }
  .leftOrright {
    display: none !important;
    width: 300px !important;
    height: 400px !important;
  }
  .from_box {
    left: 0 !important;
    .showSize {
      cursor: pointer;
      display: block !important;
      color: #fff !important;
    }
  }
}
</style>